<extend name="./Application/Common/View/block/base.php" />
<block name="header">
    <include file="./Application/Admin/View/block/easyui_header.php" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/Public/assets/css/font-awesome.css" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/font-awesome.min.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="/Public/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="/Public/Admin/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="/Public/assets/css/colorbox.css" />

    <link href="__PUBLIC__/css/Gallery/index.css" rel="stylesheet" type="text/css" />
</block>
<block name="bdoy">
    <body>
    <div class="top_nav">
        <div class="cont line-x">
            <a class="easyui-linkbutton add ref-btn" data-options="iconCls:'icon-add'" href="javascript:open_window('{:LANG('gallery_add')}', '__URL__/add')">{:LANG('gallery_add')}</a>
        </div>
    </div>
    <div>
        <div id="img_box"></div>
        <ul class="ace-thumbnails clearfix">
            <volist name="list" id="obj">
                <li id="li_{$obj['id']}">
                    <a href="{$obj['mainpath']}" data-rel="colorbox">
                        <img width="550" height="250" alt="150x150" src="{$obj['mainpath']}" />
                        <div class="text">
                            <div class="inner">点击放大，下方可以删除</div>
                        </div>
                    </a>

                    <div class="tools tools-bottom">
                        <a title="{:LANG('edit')}" href="javascript:open_edit({$obj["id"]})">
                            <i class="ace-icon fa fa-pencil"></i>
                        </a>
                        <a title="{:LANG('del')}" href="javascript:delImg({$obj["id"]})">
                            <i class="ace-icon fa fa-times red"></i>
                        </a>

                    </div>
                </li>
            </volist>
        </ul>
    </div>


    <div class="hide-div">
        <div id="window" class="easyui-window" title="{:LANG('gallery')}" data-options="modal:true,closed:true" style="width:900px;height:500px;padding:0px;overflow: hidden;">
            <iframe id="window_iframe" style="width: 100%;height: 100%;padding: 0px;"></iframe>
        </div>
    </div>
    </body>
</block>
<block name="footExtendJs">
    <script>
        function open_window(title, url){
            $('#window').attr('title', title);
            $('#window').window('open');
            $('#window_iframe').attr('src', url);
        }

        function open_edit(id){
            var url = '__URL__/edit?id='+id;
            open_window('', url);
        }
    </script>
    <script src="/Public/assets/js/bootstrap.js"></script>
    <script src="/Public/assets/js/ace/ace.js"></script>
    <script type="text/javascript">
        function delImg(id){
            $.get("__URL__/del?id="+id, function(data){
                $("#li_"+id).remove();
            });
        }
    </script>
    <script src="/Public/assets/js/jquery.colorbox.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
            var $overflow = '';
            var colorbox_params = {
                rel: 'colorbox',
                reposition:true,
                scalePhotos:true,
                scrolling:false,
                previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                next:'<i class="ace-icon fa fa-arrow-right"></i>',
                close:'&times;',
                current:'{current} of {total}',
                maxWidth:'100%',
                maxHeight:'100%',
                onOpen:function(){
                    $overflow = document.body.style.overflow;
                    document.body.style.overflow = 'hidden';
                },
                onClosed:function(){
                    document.body.style.overflow = $overflow;
                },
                onComplete:function(){
                    $.colorbox.resize();
                }
            };

            $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
            $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon


            $(document).one('ajaxloadstart.page', function(e) {
                $('#colorbox, #cboxOverlay').remove();
            });
        });
    </script>
    <!--图片特效-->

</block>
